<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/assets/js/jquery-3.3.1.min.js"></script>
    <link href="/assets/plug/Hui-iconfont/1.0.9/iconfont.min.css" rel="stylesheet" type="text/css">
    <title>轮播图添加</title>
    <style>
        .xinwen{
            width: 100%;
            height: 67px;
            padding: 15px;
            background: #e8edf0;
            border-color: #e8edf0;
        }
        .xinwen h6 {
            font-weight: bold;
            color: #333333;
            font-size: 13px;
            padding: 0;
            margin: 0;
        }
        .xinwen p {
            margin-top: 5px;
        }
        .addsowing {
            width: 100%;
            height: 69px;
            background-color: #fff;
            margin-top: 10px;
        }
        .addsowing span {
            display: inline-block;
            height: 69px;
            width: 5px;
            background-color: rgb(0, 150, 136);
        }
        .addsowing h6{
            vertical-align: top;
            display: inline-block;
            height: 38px;
            width: 96px;
            background-color: #1E9FFF;
            margin-left: 20px;
            margin-top: 15px;
            border-radius: 2px;
            text-align: center;
            color: #fff;
            font-size: 12px;
            line-height: 38px;
        }
        .sowing {
            margin-top: 20px;
        }
        table tr {
            width: 100%;
            height: 50px;
            background-color: #ffffff;
        }
        table tr td {
            border: 1px solid rgb(230, 230, 230);
            text-align: center;
            height: 40px;
            font-size: 12px;
        }
        table tr:nth-child(1) {
            font-weight: bold;
            height: 35px;
            background-color: rgb(230, 230, 230);
        }
        table tr td:nth-child(1){
            width: 120px;
        }
        table tr td:nth-child(2){
            width: 300px;
        }
        table tr td:nth-child(3){
            width: 260px;
        }
        table tr td:nth-child(4) {
            width: 250px;
            text-align: center;
        }
        table tr td:nth-child(4) img{
            width: 100px;
            height: 40px;
        }
        table tr td:nth-child(5) {
            width: 300px;
        }
        .delOne {
            color: red;
        }
        /*分页*/
        .pagination > li > a, .pagination > li > span {
            color: #0080d6 !important;
            border: 1px solid #0080d6 !important;
            margin-left: 2px;
        }
        /*蔗罩层*/
        .jump_mask {
            position: absolute;
            top: 0px;
            left: 0;
            width: 100%;
            height: 600px;
            background-color: rgba(62, 62, 62, 0.38);
            z-index: 999;
        }
        .jump_mask .jump_content {
            width: 80%;
            height: 100%;
            background-color: #fff;
            margin: 0 auto;
            text-align: left;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding-top: 5px;
        }
        .jump_mask .jump_content .mar {
            width: 780px;
            height: 52px;
            margin-top: 20px;
            margin-left: 60px;
        }
        .jump_mask .jump_content .jump_link input  {
            vertical-align: top;
            width: 660px;
            height:38px;
            padding-left:10px;
            margin-left: -5px;
        }
        .jump_mask .jump_content .mar>span{
           display: inline-block;
            position: absolute;
           width: 110px;
            padding: 8px 15px;
            height: 38px;
            line-height: 20px;
            border-width: 1px;
            border-style: solid;
            border-radius: 2px 0 0 2px;
            text-align: center;
            background-color: #FBFBFB;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            box-sizing: border-box;
        }
        .jump_mask .jump_content .mar>i {
            display: inline-block;
            font-style: normal;
            color: red;
            vertical-align: top;
            margin-left: 120px;
            margin-top: 10px;
        }


        /*编辑界面的蔗罩层*/
        .jump_mask_edit {
            position: absolute;
            top: 0px;
            left: 0;
            width: 100%;
            height: 500px;
            background-color: rgba(62, 62, 62, 0.38);
            z-index: 6;
        }
        .jump_mask_edit .jump_content {
            width: 80%;
            height: 100%;
            background-color: #fff;
            margin: 0 auto;
            text-align: left;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding-top: 5px;
        }
        .jump_mask_edit .jump_content .mar {
            width: 780px;
            height: 52px;
            margin-top: 20px;
            margin-left: 60px;
        }
        .jump_mask_edit .jump_content .jump_link input  {
            vertical-align: top;
            width: 660px;
            height:38px;
            padding-left:10px;
            margin-left: -5px;
        }
        .jump_mask_edit .jump_content .mar>span{
            display: inline-block;
            position: absolute;
            width: 110px;
            padding: 8px 15px;
            height: 38px;
            line-height: 20px;
            border-width: 1px;
            border-style: solid;
            border-radius: 2px 0 0 2px;
            text-align: center;
            background-color: #FBFBFB;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            box-sizing: border-box;
        }
        .jump_mask_edit .jump_content .mar>i {
            display: inline-block;
            font-style: normal;
            color: red;
            vertical-align: top;
            margin-left: 120px;
            margin-top: 10px;
        }

        .jump_submit {
            width: 100%;
        }
        .jump_submit>div {
            width: 200px;
            height: 40px;
            margin: 0 auto;
        }
        .jump_submit input {
            display: inline-block;
            margin-top: 30px;
            font-size: 14px;
        }
        .jump_submit input:nth-child(1){
            width: 70px;
            height: 38px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            background-color: #009688;
            color: #fff;
        }
        .jump_submit input:nth-child(2){
            width: 70px;
            height: 38px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            background-color: #fff;
            color: #000;
            margin-left: 10px;
        }
        .images {
            width:335px;
            height: 209px;
            margin-left: 59px;
        }
        #file_upload_pc {
            position: absolute;
            width: 110px;
            height: 38px;
            border: 1px solid red;
            opacity: 0;
            z-index: 999;
        }
        #file_upload_mobile {
            position: absolute;
            width: 110px;
            height: 38px;
            border: 1px solid red;
            opacity: 0;
            z-index: 999;
        }
        #file_upload_pc_edit {
            position: absolute;
            width: 110px;
            height: 38px;
            border: 1px solid red;
            opacity: 0;
            z-index: 999;
        }
        #file_upload_mobile_edit {
            position: absolute;
            width: 110px;
            height: 38px;
            border: 1px solid red;
            opacity: 0;
            z-index: 999;
        }
        .add_link {
            position: static !important;
        }
        .edit_link {
            position: static !important;
        }
    </style>
</head>
<body>
    <div class="xinwen">
        <h6>轮播图添加</h6>
        <p>一个管员可以有多个角色组,左侧的菜单根据管理员所拥有的权限进行生成</p>
    </div>
    <div class="addsowing">
        <span></span>
        <h6>新增轮播图</h6>
    </div>
    <div class="sowing">
        <div class="sowing_main">
            <table>
                <tr>
                    <td>ID</td>
                    <td>指向链接</td>
                    <td>位置</td>
                    <td>图片</td>
                    <td>操作</td>
                </tr>
                {foreach name="sowing" item="value"}
                    <tr {if condition="$key%2 eq 0"}style="background-color: #f2f2f2"{/if}>
                        <td>{$value.id}</td>
                        <td>{$value.link}</td>
                        <td>
                            {if condition="$value['status'] eq 1"}
                                pc 端
                            {else /}
                                移动端
                            {/if}
                        </td>
                        <td><img src="{$value.sow_img}" alt=""></td>
                        <td><a class="editSowing"  href="javascript:void(0)"><i class="Hui-iconfont">&#xe6df;编辑</i></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="delOne" href="/admin/sowing/delOneSowing?id={$value.id}"><i class="Hui-iconfont">&#xe6e2;删除</i></a></td>
                    </tr>
                {/foreach}
            </table>
        </div>
    </div>
    <div class="paginate">{$page}</div>
    <!--添加页面-->
    <div class="jump_mask" hidden>
        <div class="jump_content">
            <div class="jump_link mar">
                <span class="add_link">链接地址</span>
                <input type="text" name="link" placeholder="请输入链接地址">
            </div>
            <div class="jump_pc_img mar">
                <span>上传图片</span>
                <input id="file_upload_pc" name="pc_img" type="file" multiple="true">
                <i>(建议上传图片大小：1920px*500px)</i>
            </div>
            <img src="" id="txtimg1" alt="">
            <div class="jump_mobile_img mar">
                <span>上传图片</span>
                <input id="file_upload_mobile" name="mobile_img" type="file" multiple="true">
                <i>(建议上传图片大小：720px*240px)</i>
            </div>
            <img src="" id="txtimg2" alt="">
            <div class="jump_submit">
                <div>
                    <input type="submit" id="save" value="保存">
                    <input type="submit" id="cancle" value="取消">
                </div>
            </div>
        </div>
    </div>
    <!--编辑页面-->
    <div class="jump_mask_edit" hidden >
        <div class="jump_content">
            <div class="jump_link mar">
                <span class="edit_link">链接地址</span>
                <input type="text" name="link_edit" placeholder="请输入链接地址">
            </div>
            <div class="jump_pc_img mar">
                <span>上传图片</span>
                <input id="file_upload_pc_edit" name="pc_img_edit" type="file" multiple="true">
                <i>(建议上传图片大小：1920px*500px)</i>
            </div>
            <img src="" id="txtimg_edit1" alt="">
            <div class="jump_mobile_img mar">
                <span>上传图片</span>
                <input id="file_upload_mobile_edit" name="mobile_img_edit" type="file" multiple="true">
                <i>(建议上传图片大小：720px*240px)</i>
            </div>
            <img src="" id="txtimg_edit2" alt="">
            <div class="jump_submit">
                <div>
                    <input type="submit" id="edit_save" value="保存">
                    <input type="submit" id="edit_cancle" value="取消">
                </div>
            </div>
        </div>
        <input type="hidden" name="status_code" value="">
        <input type="hidden" name="edit_id" value="">
</body>
<script>
    $(function () {

        //上传的函数
        function qiniuUpload(fileData, img, cssClass) {
            var options = {
                url: '/admin/sowing/qiniu',
                type: 'post',
                data: fileData,
                contentType: false, // 告诉jQuery不要去设置请求头
                processData: false, // 告诉jQuery不要将data属性指定的对象转换为字符串
                success: function (res) {
                    if (res.status == 1) {
                        $(img).attr('src', res.data).addClass(cssClass);
                    }else {
                        alert(res.info);
                        return
                    }
                }
            }
            $.ajax(options)
        }
        //pc的LOgo
        $('#file_upload_pc').change(function () {
            oInput = $('#file_upload_pc')
            if (oInput.length <= 0) {
                return window.alert('请选择文件')
            }
            var file;
            file = oInput[0].files[0]
            var fd = new FormData()
            fd.append('myfile', file)
            //调用上传函数
            qiniuUpload(fd, '#txtimg1', 'images');
        });

        //第二张图
        $('#file_upload_mobile').change(function () {
            oInput = $('#file_upload_mobile')
            if (oInput.length <= 0) {
                return window.alert('请选择文件')
            }
            var file;
            file = oInput[0].files[0]
            var fd = new FormData()
            fd.append('myfile', file)
            //调用上传函数
            qiniuUpload(fd, '#txtimg2', 'images');
        });

        //编辑的第一张图
        $('#file_upload_pc_edit').change(function () {
            oInput = $('#file_upload_pc_edit')
            if (oInput.length <= 0) {
                return window.alert('请选择文件')
            }
            var file;
            file = oInput[0].files[0]
            var fd = new FormData()
            fd.append('myfile', file)
            //调用上传函数
            qiniuUpload(fd, '#txtimg_edit1', 'images');
        });

        //编辑的第二张图
        $('#file_upload_mobile_edit').change(function () {
            oInput = $('#file_upload_mobile_edit')
            if (oInput.length <= 0) {
                return window.alert('请选择文件')
            }
            var file;
            file = oInput[0].files[0]
            var fd = new FormData()
            fd.append('myfile', file)
            //调用上传函数
            qiniuUpload(fd, '#txtimg_edit2', 'images');
        });


        //蔗罩层显示
        $('.addsowing h6').click(function () {
            $('.jump_mask').prop('hidden', false);
        })
        //蔗罩层隐藏
        $('#cancle').click(function () {
            $('.jump_mask').prop('hidden', true);
        })
        //提交
        $('#save').click(function () {
            var link = $('input[name=link]').val();
            if(!link) {
                alert('链接不能为空!')
                return
            }
            var sow_img_pc = $('#txtimg1').attr('src');
            var sow_img_mobile = $('#txtimg2').attr('src');
            if(!sow_img_pc && !sow_img_mobile) {
                alert('图片至少选择一个!');
                return
            }

            $.ajax({
                url: '/admin/sowing/addsowing',
                type: 'post',
                data: {link: link, sow_img_pc: sow_img_pc, sow_img_mobile: sow_img_mobile},
                success: function (res) {
                    alert(res.info);
                    if(res.status) {
                        top.location.href = '/admin/sowing/sowingmap?ref=addtabs';
                    }
                }
            })
        })

        //编辑页面展示
        $('.editSowing').click(function () {

            var thisId = $(this).parent().siblings(":first").text();
            $('#txtimg_edit1').attr('src', '').removeClass('images');
            $('#txtimg_edit2').attr('src', '').removeClass('images');

            $.ajax({
                url: '/admin/sowing/getOneSowing',
                data: {id: thisId},
                type: 'post',
                success: function (res) {
                    if(res.data.status == '1') {
                        $('input[name=edit_id]').val(res.data.id);
                        $('input[name=link_edit]').val(res.data.link);
                        $('input[name=status_code]').val(res.data.status);
                        $('#txtimg_edit1').attr('src', res.data.sow_img).addClass('images');
                        //显示蔗罩层
                        $('.jump_mask_edit').prop('hidden', false);
                    }
                    if(res.data.status == '2') {
                        $('input[name=edit_id]').val(res.data.id)
                        $('input[name=link_edit]').val(res.data.link);
                        $('input[name=status_code]').val(res.data.status);
                        $('#txtimg_edit2').attr('src', res.data.sow_img).addClass('images');
                        //显示蔗罩层
                        $('.jump_mask_edit').prop('hidden', false);
                    }
                }
            })


        })
        //编辑蔗罩层隐藏
        $('#edit_cancle').click(function () {
            $('.jump_mask_edit').prop('hidden', true);
        })

        //编辑的提交
        $('#edit_save').click(function () {
            var link = $('input[name=link_edit]').val();
            var id = $('input[name=edit_id]').val();
            var status = $('input[name=status_code]').val();
            var sow_img1 = $('#txtimg_edit1').attr('src');
            var sow_img2 = $('#txtimg_edit2').attr('src');

            if(status == '1') {
                if(!sow_img1) {
                    alert('pc端图片不能为空!');
                    return
                }
                $.ajax({
                    url: '/admin/sowing/editSubmitSowing',
                    type: 'post',
                    data: {id: id, link: link,  sow_img1: sow_img1},
                    success: function(res) {
                        alert(res.info);
                        if(res.status){
                            top.location.href = '/admin/sowing/sowingmap?ref=addtabs';
                        }
                    }
                })
            }
            if(status == '2') {
                if(!sow_img2) {
                    alert('移动端图片不能为空!');
                    return
                }
                $.ajax({
                    url: '/admin/sowing/editSubmitSowing',
                    type: 'post',
                    data: {id: id, link: link, sow_img2: sow_img2},
                    success: function(res) {
                        alert(res.info);
                        if(res.status){
                            top.location.href = '/admin/sowing/sowingmap?ref=addtabs';
                        }
                    }
                })
            }
        })

        //删除某一个图
        $('.delOne').click(function (event) {
           if(!confirm('你确定要删除吗?')) {
               event.preventDefault();
           }
        })

    })
</script>
</html>